<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body class="container-fluid"><br>
		
		<div id="app">
			<!--同级组件间的通信-->
			<compon1></compon1>
			<compon2></compon2>
		</div>

		
		
		<script src="js/vue.js" ></script>
		<script>
			var bus = new Vue();
			
			Vue.component('compon1',{
				template: '<p><input type="text" v-model="msg"></p>',
				data: function(){
					return {
						msg: ''
					}
				},
				watch: {
					msg: function(newValue){
						bus.$emit("change",newValue);
					}
				},
				mounted: function(){  // 当vue实例一加载完，执行一个回调函数
					var _this = this;
					bus.$on("change",function(data){
						_this.msg = data;
					})
				}
			});
			
			Vue.component('compon2',{
				template: '<p><input type="text" v-model="rev"></p>',
				data: function(){
					return {
						rev: ''
					}
				},
				watch: {
					rev: function(newValue){
						bus.$emit("change",newValue);
					}
				},
				mounted: function(){ 
					var _this = this;
					bus.$on("change",function(data){
						_this.rev = data;
					})
				}
			});
			

			
			var vm = new Vue({
				el: '#app',
				data: {
					
				},
				methods: {
					
				}
			});
			
			
		</script>
	</body>
</html>
